<template>
  <div class="boxs">
    <div>
      <el-radio-group v-model="tabPosition" style="margin-bottom: 30px">
        <el-radio-button label="社团介绍">社团介绍</el-radio-button>
        <el-radio-button label="社团成员">社团成员</el-radio-button>
      </el-radio-group>
    </div>
    <div class="content" v-if="tabPosition == '社团介绍'">
      <div
        class="picture"
        style="display: flex; width: 250px; height: 250px; text-align: center"
      >
        <img v-if="model.icon" :src="imgUrl + model.icon" alt="" />
      </div>
      <div
        class="title"
        style="margin: 10px 0; font-size: 40px; text-align: center"
      >
        {{ model.organization_name }}
      </div>
      <div style="margin: 10px">
        <div style="position: relative; left: -100px; font-size: 16px">
          会员人数:&#8195;
          <span>{{ options4 }}</span>
        </div>
      </div>
      <div style="margin: 10px">
        <div style="position: relative; left: -100px; font-size: 22px">
          一、社团简介
        </div>
        <div
          v-html="model.introduction"
          style="
            font-size: 18px;
            margin-top: 20px;
            color: #5e5e5e;
            text-indent: 2em;
          "
        ></div>
      </div>
      <div style="margin: 10px">
        <div style="position: relative; left: -100px; font-size: 22px">
          二、社团宗旨
        </div>
        <div
          v-html="model.tenet"
          style="
            font-size: 18px;
            margin-top: 20px;
            color: #5e5e5e;
            text-indent: 2em;
          "
        ></div>
      </div>
      <div style="margin: 10px">
        <div style="position: relative; left: -100px; font-size: 22px">
          三、社团类型
        </div>
        <div
          style="
            font-size: 18px;
            margin-top: 20px;
            color: #5e5e5e;
            text-indent: 2em;
          "
        >
          {{ model.associType1 }}
        </div>
      </div>
      <div style="margin: 10px">
        <div style="position: relative; left: -100px; font-size: 22px">
          四、所属院系
        </div>
        <div
          v-html="model.department_name"
          style="
            font-size: 18px;
            margin-top: 20px;
            color: #5e5e5e;
            text-indent: 2em;
          "
        ></div>
      </div>

      <div style="margin: 10px">
        <div
          style="
            position: relative;
            left: -100px;
            font-size: 22px;
            margin-bottom: 20px;
          "
        >
          五、部门简介
        </div>
        <p v-for="(item2, index2) in model.sector_info" :key="index2">
          【{{ item2.sector_name }}】{{ item2.sector_duty }}
        </p>
      </div>
      <div style="margin: 10px">
        <div
          style="
            position: relative;
            left: -100px;
            font-size: 22px;
            margin-bottom: 20px;
          "
        >
          六、品牌活动
        </div>
        <div>
          <div style="margin-bottom: 20px; font-size: 19px; line-height: 1.5em">
            <span style="font-size: 20px; line-height: 2em"
              >1、品牌活动名称</span
            ><br />&#8195;&#8195;<span
              style="color: #5e5e5e; text-indent: 2em"
              >{{ model.brandName }}</span
            >
          </div>
          <div style="font-size: 19px; line-height: 2em">
            <span style="font-size: 20px">2、品牌活动内容</span
            ><br />&#8195;&#8195;<span
              style="color: #5e5e5e; text-indent: 2em"
              >{{ model.brandContent }}</span
            >
          </div>
        </div>
      </div>
    </div>
    <div
      v-else
      style="
        margin: 50px;
        margin-top: 20px;
        display: flex;
        min-height: 500px;
        flex-wrap: wrap;
      "
    >
      <div
        v-for="item in options2"
        style="width: 25%; margin-top: 20px"
        :key="item"
      >
        <img :src="imgUrl + item.avatar" style="width: 150px; height: 150px" />
        <div style="font-size: 14px; line-height: 22px; margin-top: 5px">
          用户名：{{ item.username }}
        </div>

        <div style="font-size: 14px; line-height: 22px">
          职位：{{ item.stu_position }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    id: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      //社团信息
      model: {},
      imgUrl: process.env.VUE_APP_IMG_URL,
      //用户信息
      userInfo: {
        user_id: "",
      },
      //栏目
      tabPosition: "社团介绍",
      options1: [],
      options2: [],

      options4: [],
    };
  },
  async mounted() {
    //初始化更新信息
    await this.bFetch1();
    this.fetch();
    this.bFetch2();
    this.bFetch4();
  },
  methods: {
    async bFetch4() {
      const { data } = await this.$http.getVipNum({
        organization_id: this.id,
      });

      this.options4 = ((data.data || [])[0] || {}).total;
    },

    async bFetch1() {
      const { data } = await this.$http.getClubType();

      this.options1 = data.data;
    },
    async bFetch2() {
      const { data } = await this.$http.getHuizhang({
        id: this.id,
        page: 1,
        limit: 10000,
      });

      this.options2 = data.data;
    },
    async getUserInfo() {
      const { data } = await this.$http.getUserInfo();
      this.userInfo = data.data;
    },
    async joinThis() {
      if (this.userInfo.user_id === "") {
        return this.$$message.error("您还没有登录账户");
      }
      await this.$http.joinOrganization({
        userId: this.userInfo.user_id,
        organizationId: this.id,
        status: 0,
      });
      this.$message.success("您已申请加入社团，等待管理员审核");
    },

    async fetch() {
      const { data } = await this.$http.getOrganizationById({
        organization_id: this.id,
      });
      this.model = data.data[0];
      this.model.associType1 = (
        this.options1.find((item) => item.type_id == this.model.associType) ||
        {}
      ).type_name;
    },
  },
};
</script>

<style lang="scss" scoped>
.boxs {
  width: 85%;
  margin: 10px auto;
  margin-bottom: 100px;
  .content {
    display: flex;
    margin-left: 7.5%;
    flex-direction: column;
    .picture {
      width: 10rem;
      height: 8rem;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .card {
      position: absolute;
      top: 6.8rem;
      left: 50%;
      transform: translateX(-50%);
      background-color: #fff;
      width: 8.5rem;
      margin: 0 auto;
      border-radius: 0.2rem;
      height: 1.4rem;
      padding: 0.4rem;
      box-shadow: 0px 0px 5px 1px rgb(236, 236, 236);
      .title {
        font-size: 0.45rem;
      }
      .people-number {
        margin-top: 0.2rem;
        font-size: 0.3rem;
        span {
          color: red;
          font-size: 0.5rem;
        }
      }
    }
    .box {
      padding: 0.4rem;
      margin-top: 1rem;
      font-size: 0.4rem;

      .category {
        font-size: 0.35rem;
        span {
          color: #aaa;
        }
      }
      .introduction {
        &-title {
          padding-left: 0.15rem;
          border-left: 0.15rem solid yellow;
          margin: 0.5rem 0;
        }
        &-content {
          overflow: scroll;
          border-top: 1px dashed #eee;
          .image {
            margin: 0 !important;
          }
          line-height: 0.6rem;
          img {
            width: 100% !important;
            height: 100% !important;
          }
          font-size: 14px;
          .ql-size-small {
            font-size: 10px !important;
          }
          .ql-size-large {
            font-size: 18px !important;
          }
          .ql-size-huge {
            font-size: 32px !important;
          }
        }
      }
    }
  }
}
</style>
